<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <div id="app"></div>
</body>

<script>
  /**
   * 问题：
   * computed中的缓存什么意思？
   * 
   * 答案：
   * 当需要使用computed属性时，会根据dirty进行判断，
   * 如果dirty为true（表示不是value最新的值），会进行执行，
   * 否则会使用watcher.value里缓存的数据。
   * 同时，他也是lazy的，当里面的getter函数里的响应式属性发生变化时候，
   * 并不会像其他watcher立即执行里面的getter函数，等它第一次被调用时，才会进行执行。
   * 
   * 问题：
   * watcher是什么？
   * 
   * 答案：
   * 每个组件实例都会对应一个watcher实例，它会在组件渲染过程中把 "接触" 过的属性记录为依赖【依赖收集】，
   * 之后当依赖的setter触发，会通知watcher, 使它关联的组件重新渲染。
   * 它的核心是副作用函数，当副作用函数中的响应式数据发生变化后，会自动执行副作用函数，这个就是computed的主要实现，
   * 同时它也包含一个回调函数，置两次副作用函数返回结果不同时候，会自动执行回调函数，这个就是对应的watch的函数。
   * 对应vue2而言，创建watcher的方式有3种，
   * 1. 组件实例
   * 2. computed
   * 3. watch
  */


  window.app = new Vue({
    el: '#app',
    data: {
      a: 1,
    },
    computed: {
      b() {
        console.log('getter: computed')
        // 副作用函数
        this.a
      }
    },
    watch: {
      a() {
        console.log('watch: cb')
      }
    }
  })

  // 测试--------------------
  app.b // 'getter: computed'
  app.b // 无打印
  
  app.a = 2 // 'watch: cb'
  app.b // 'getter: computed'

  // computed里面函数是否执行跟return没关系
</script>
</html>
